<!--  设备管理 list  -->
<template>
	<div>
		<el-card shadow="hover">
			<el-form :inline="true" :model="data.queryParams">
				<el-form-item label="设备型号">
					<el-select size="default" v-model.number="data.queryParams.modelType" clearable reserve-keyword
						placeholder="设备型号" style="width: 100px" @change="fetch">
						<el-option v-for="item in deviceModelOptions" :key="item.label" :label="item.label" :value="item.value" />
					</el-select>
				</el-form-item>

				<el-form-item label="">
					<el-button size="default" type="primary" @click="search"> 查询</el-button>
				</el-form-item>
				<el-form-item label="" style="float: right; margin-right: 0">
					<el-button size="default" type="success" @click="fetch">刷新</el-button>
					<el-button size="default" type="primary" @click="create">新增</el-button>
				</el-form-item>
			</el-form>

			<!-- list -->
			<el-table ref="table" :data="data.tableData.list" :border="true" size="default" highlight-current-row :fit="true"
				height="calc(100vh - 310px)">
				<el-table-column align="center" label="#" type="index" width="50px" :reserve-selection="true" />
				<el-table-column label="设备厂商" align="left" prop="modelType" width="100px" />
				<el-table-column label="固件版本" align="left" prop="firmware" width="100px" />
				<el-table-column label="升级版本" align="left" prop="version" width="100px" />
				<el-table-column label="Url" align="left" prop="url" />
				<el-table-column label="文件大小" align="left" prop="filesize" width="100px" />
				<el-table-column label="备注" align="left" prop="remark" width="200px" />
				<el-table-column label="操作" fixed="right" width="100px">
					<template #default="{ row }">
						<el-button @click="edit(row)" type="primary" text bg v-auth="'device:update'">编辑</el-button>
					</template>
				</el-table-column>
			</el-table>

			<!-- 分页 -->
			<pagination v-show="data.tableData.total > 0" :total="data.tableData.total"
				v-model:page="data.queryParams.pageNum" v-model:limit="data.queryParams.pageSize" @pagination="fetch" />
		</el-card>

		<!--  编辑  -->
		<Edit v-if="data.editVisible" :dialog-visible="data.editVisible" :rowData="data.curRow" @close="editClose"
			@success="editSuccess" />


	</div>
</template>

<script lang="ts" setup name="DeviceList">
import { reactive, onMounted, ref, watch, onUpdated } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { useSmoke } from '/@/hook/index';
import upgrageApi from '/@/api/smoke/upgrade';
import Edit from './components/editUpgrade.vue';
import { smokeStore } from '/@/stores/smoke';
import { useUserInfo } from '/@/stores/userInfo';
import { storeToRefs } from 'pinia';

const stores = useUserInfo();

const btnColumn = ref();

const platform = [
	{
		orgId: 0,
		orgName: '全部',
	},
	{
		orgId: 1,
		orgName: 'dev',
	},
	{
		orgId: 2,
		orgName: 'test',
	},
	{
		orgId: 3,
		orgName: 'work',
	},
];

// 设备状态
const deviceModelOptions = [
	{
		value: '',
		label: '全部',
	},
	{
		value: 'M1',
		label: 'M1',
	},
	{
		value: 'M3',
		label: 'M3',
	},
	{
		value: 'M4',
		label: 'M4',
	},
];

const radioOnline = [
	{ value: '', label: '全部' },
	{ value: '1', label: '刚来过' },
	{ value: '2', label: '已离开' },
];

const remarkList = [
	{ value: '', label: '全部' },
	{ value: '1', label: '有备注' },
	{ value: '2', label: '无备注' },
];

const data = reactive({
	queryParams: {
		modelType: '',
		pageNum: 1,
		pageSize: 10,
	},

	mapStatusData: [],
	editVisible: false,

	selection: [],
	loading: false,
	tableData: {
		list: <any>[],
		total: 0,
	},
	curRow: <any>{},
});

onMounted(() => {
	fetch();
});


// 新增
function create() {
	data.editVisible = true;
	data.curRow = null;
}

function addClose() {
	data.editVisible = false;
}

function addSuccess() {
	addClose()
	fetch();
}

// 编辑
function edit(row: any) {
	data.curRow = row;
	data.editVisible = true;
}

//编辑弹窗关闭
function editClose() {
	data.editVisible = false;
	data.editVisible = false;
}

function editSuccess() {
	editClose();
	fetch();
}

//搜索
function search() {
	data.queryParams.pageNum = 1;
	fetch();
}

// 删除
function singleDelete(row: any) {
	let params = {
		id: row.id
	};

	ElMessageBox.confirm('此操作将永久删除该设备, 是否继续?', '提示', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning',
	})
		.then(() => {
			upgrageApi.remove(params).then((res) => {
				ElMessage.success('删除成功');
				fetch();
			});
		})
		.catch(() => {
			ElMessage.info('已取消操作');
		});
}

// 获取列表页数据
function fetch() {
	data.loading = true;

	upgrageApi
		.list(data.queryParams)
		.then((res) => {
			console.log(res.data);
			data.tableData = res.data;
			data.loading = false;
		})
		.finally(() => (data.loading = false));
}
</script>
<style lang="scss" scoped>
.flex {
	display: flex;
	justify-content: space-between;

	.length {
		color: #cdd0d6;
	}
}

.address {
	line-height: 32px;
}
</style>
